<!--
 * @Author: xuyijie
 * @Date: 2022-12-06 08:39:46
 * @LastEditors: xuyijie
 * @LastEditTime: 2022-12-07 13:52:30
 * @Description: 文件说明
-->
<script setup lang="ts">
import router from '@/router'
import useStorage from '@/composables/hd/useStorage'
const storage = useStorage()
const route = useRoute()
const routes = ref<{ title: string; name: string }[]>([])
if (storage.get('admin-history-menu')) {
  routes.value = storage.get('admin-history-menu')
}
router.beforeResolve(async (to) => {
  if (Object.keys(to.query).length > 0 || Object.keys(to.params).length > 0) return
  if (!to.meta.menu?.title || routes.value.find((r) => r.name == to.name)) return
  if (!to.fullPath.startsWith('/admin')) return
  if (routes.value.length > 10) {
    routes.value.splice(0, 10)
  }
  routes.value.unshift({ name: to.name as string, title: to.meta.menu?.title })
  storage.set('admin-history-menu', routes.value)
})
const del = (name: string) => {
  routes.value = routes.value.filter((r) => r.name !== name)
  storage.set('admin-history-menu', routes.value)
  if (name == route.name) {
    router.push({ name: routes.value.length ? routes.value[0].name : 'admin' })
  }
}
</script>

<template>
  <section v-show="routes.length">
    <div>
      <router-link
        v-for="(route, index) of routes"
        :key="index"
        :to="{ name: route.name }"
        class="menu-router"
        :class="{ choose: $route.name == route.name }">
        {{ route.title }}
        <icon-close-small
          @click.prevent="del(route.name!)"
          theme="outline"
          size="20"
          :fill="{ '#fff': $route.name == route.name }"
          :strokeWidth="3" />
      </router-link>
    </div>
  </section>
</template>
<style lang="scss" scoped>
section {
  div {
    @apply overflow-x-auto whitespace-pre absolute flex gap-2;
  }
  @apply p-2 px-5 border-t border-b bg-gray-50 shadow-sm relative overflow-auto h-[50px];
  .menu-router {
    @apply border inline-flex items-center hover:bg-teal-600 hover:text-white duration-300 bg-white rounded-md shadow-sm py-2 pl-5 pr-2 text-xs;
  }
  .choose {
    @apply bg-teal-600 text-white;
  }
}
</style>
